<template>
  <div class="home">
    <el-row :gutter="7" style="height:100%">
      <!--左侧-->
      <el-col :span="6" style="height: 100%">
        <div class="left-group">
          <div class="left-item-group">
            <div class="left-item">
              <div class="item-head-group">
                <div class="item-title-icon">
                  <img src="../../../static/images/title-icon.png" alt="">
                </div>
                <div class="item-title">资源库统计</div>
              </div>
              <div class="echart-group">
                <EchartPie :data="groupCountData"></EchartPie>
              </div>
            </div>
          </div>
          <div class="left-item-group">
            <div class="left-item">
              <div class="item-head-group">
                <div class="item-title-icon">
                  <img src="../../../static/images/title-icon.png" alt="">
                </div>
                <div class="item-title">资源使用率</div>
              </div>
              <div class="echart-group">
                <EchartBar :data="rsUtilizationData"></EchartBar>
              </div>
            </div>
          </div>
          <div class="left-item-group">
            <div class="left-item">
              <div class="item-head-group">
                <div class="item-title-icon">
                  <img src="../../../static/images/title-icon.png" alt="">
                </div>
                <div class="item-title">资源告警</div>
              </div>
              <div class="echart-group">
                <AlarmScrollTable :list="arrData1"></AlarmScrollTable>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!--中-->
      <el-col :span="12" style="height: 100%">
        <div class="center-group" style="height: 100%">
          <div class="center-big-body">
            <div class="center-big-screen">
              <!--通知-->
              <div class="notice-bar">
                <div class="notice-label">
                  <svg-icon icon-class="notice-icon" class="notice-icon"/>
                </div>
                <div class="notice-list-group">
                  <Marqueex v-if="newsList.length" :lists="newsList"></Marqueex>
                </div>
              </div>

              <!--旋转大屏-->
              <Shuffling
                  v-if="showshffling"
                  :list="listData"
                  index="99"
                  @handelBall="checkApp">
              </Shuffling>
            </div>
          </div>

          <div class="relat-graph-group">
            <div class="relat-graph-body">
              <RelatGraph :appid="appid"></RelatGraph>
            </div>
          </div>
        </div>
      </el-col>
      <!--右-->
      <el-col :span="6" style="height: 100%">
        <div class="left-group">
          <div class="left-item-group">
            <div class="left-item">
              <div class="item-head-group">
                <div class="item-title-icon">
                  <img src="../../../static/images/title-icon.png" alt="">
                </div>
                <div class="item-title">组件库统计</div>
              </div>
              <div class="echart-group">
                <LineChartGradient :data="LineChartGradient"></LineChartGradient>
              </div>
            </div>
          </div>
          <div class="left-item-group">
            <div class="left-item">
              <div class="item-head-group">
                <div class="item-title-icon">
                  <img src="../../../static/images/title-icon.png" alt="">
                </div>
                <div class="item-title">组件使用量统计</div>
              </div>
              <div class="echart-group">
                <EchartRadar :data="radarData"></EchartRadar>
              </div>
            </div>
          </div>
          <div class="left-item-group">
            <div class="left-item">
              <div class="item-head-group">
                <div class="item-title-icon">
                  <img src="../../../static/images/title-icon.png" alt="">
                </div>
                <div class="item-title">组件/应用告警</div>
              </div>
              <div class="echart-group">
                <AlarmScrollTable :list="arrData2"></AlarmScrollTable>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {formatDate} from "@/utils";
import {
  initApplies,
  initGroupCount,
  initNoticeInfo,
  initPlgsAplsGalarm,
  initPluginsTpCount,
  initPluginsUtilization,
  initResourceGalarm,
  initRsUtilization,
} from "@/apis/home/indexHome";
import Marqueex from './comp/Marqueex1'
import EchartPie from '@/components/chart/EchartPie'
import EchartBar from '@/components/chart/EchartBar'
import AnimationTable from "@/components/AnimationTable"
import EchartRadar from '@/components/chart/EchartRadar'
import LineChartGradient from '@/components/chart/LineChartGradient'
import RelatGraph from './comp/RelatGraph'
import Shuffling from './comp/Shuffling'
import AlarmScrollTable from './comp/AlarmScrollTable' // 告警列表

export default {
  components: {
    Shuffling, Marqueex, EchartPie, EchartBar, AnimationTable, EchartRadar, LineChartGradient, RelatGraph,
    AlarmScrollTable
  },
  data () {
    return {
      newsList: [],
      listData: [{img: "../../assets/img/avt.png"}],
      // 初始化资源组汇总信息1-1
      groupCountData: {
        data: []
      },
      // 1-2
      rsUtilizationData: {
        xdata: [],
        data: []
      },
      // 3-1
      radarData: {
        indicatorData: [],
        xdata: [],
        data: []
      },
      LineChartGradient: {
        data: []
      },
      // 表格
      arrData1: [{alarmName: "", alarmType: 0, alarmLevel: 1, alarmTime: "", alarmText: "", alarmClear: 0}],
      arrData2: [{alarmName: "", alarmType: 0, alarmLevel: 1, alarmTime: "", alarmText: "", alarmClear: 0}],
      showshffling: false,
      appid: ''
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init () {
      const _this = this;
      // 初始化转盘
      initApplies().then((res) => {
        _this.listData = res.data.data;
        if (res.data.data.length) {
          this.appid = res.data.data[0].id
        }
        _this.showshffling = true;
      });
      // 初始化资源组汇总信息1-1
      initGroupCount().then((res) => {
        this.groupCountData.data = res.data.data
      });
      // 初始化资源空间使用率汇总 1-2
      initRsUtilization().then((res) => {
        this.rsUtilizationData.data = res.data.data.map(item => {
          return parseInt(item.value)
        })
        this.rsUtilizationData.xdata = res.data.data.map(item => {
          return item.name
        })
      });
      // 初始化系统通告信息 1-3
      initNoticeInfo().then((res) => {
        this.newsList.push(res.data.data)
      });
      // 资源告警 1-3
      initResourceGalarm().then((res) => {
        this.arrData1 = res.data.data.map(item => {
          return {
            ...item,
            alarmTypeNmae: ['应用', '组件', '资源', '默认', '其他'][item.alarmType],
            timeStr: formatDate('yyyy-MM-dd', item.alarmTime),
            levelStr: ['特别严重', '严重', '较重', '一般'][item.alarmLevel - 1],
            clearStr: ['未清除', '已清除'][item.alarmClear]
          }
        });
      });
      // 初始化组件类别统计 3-1
      initPluginsTpCount().then((res) => {
        this.LineChartGradient.data = res.data.data.map(item => {
          return {
            name: item.name,
            value: parseFloat(item.value).toFixed(2)
          }
        });
      });
      // 初始化组件使用量统计 3-2
      initPluginsUtilization().then((res) => {
        this.radarData.data = res.data.data.map((item, index) => {
          return parseInt(item.value)
        });
        this.radarData.indicatorData = res.data.data.map(item => {
          return {
            max: Math.max.apply(Math, this.radarData.data.map(item => {
              return item
            })),
            name: item.name
          }
        });
      });
      // 资源告警 3-3
      initPlgsAplsGalarm().then((res) => {
        this.arrData2 = res.data.data.map(item => {
          return {
            ...item,
            alarmTypeNmae: ['应用', '组件', '资源', '默认', '其他'][item.alarmType],
            timeStr: formatDate('yyyy-MM-dd', item.alarmTime),
            levelStr: ['特别严重', '严重', '较重', '一般'][item.alarmLevel - 1],
            clearStr: ['未清除', '已清除'][item.alarmClear]
          }
        });
      });
    },

    checkApp (appid) {
      this.appid = appid
    }
  }
};
</script>

<style lang="less" scoped>
  .box-bg {
    background: url(../../assets/img/indexHome/box-image.png) no-repeat;
    background-size: 100% 100%;
  }

  .home {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .left-group {
      height: 100%;
      display: flex;
      flex-direction: column;

      .left-item-group {
        padding: 7px 0;
        height: 33.33333%;

        .left-item {
          height: 100%;
          width: 100%;
          background-image: url(../../assets/img/indexHome/box-image.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center center;
          padding: 5px 15px 35px;
          display: flex;
          flex-direction: column;

          .item-head-group {
            flex-shrink: 0;
            position: relative;
            display: flex;
            align-items: center;
            height: 30px;

            .item-title-icon {
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              width: 25px;
              height: 30px;
              display: flex;
              align-items: center;

              img {
                margin-left: 5px;
                width: 13px;
              }
            }

            .item-title {
              padding-left: 25px;
              color: #20c6fb;
              font-size: 18px;
              font-weight: bold;
            }
          }

          .echart-group {
            height: calc(100% - 30px);
          }
        }
      }
    }

    .center-group {

      .center-big-body {
        height: 66.6666%;
        padding: 7px 0;

        .center-big-screen {
          height: 100%;
          position: relative;
          padding-top: 40px;

          .notice-bar {
            height: 40px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            margin: auto;
            display: flex;
            align-items: center;
            /*background-image: url(../../assets/img/notice-bg.png);*/
            /*background-size: 100% 100%;*/
            /*background-repeat: no-repeat;*/
            background: linear-gradient(to top, #03446c, transparent, #03446c);

            .notice-label {
              width: 40px;
              height: 40px;
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;

              .notice-icon {
                width: 18px;
                height: 18px;
                fill: #20c6fb;
              }
            }

            .notice-list-group {
              flex: 1;
              width: calc(100% - 40px);
              height: 40px;
              display: flex;
              align-items: center;
              padding-right: 5px;
              color: #20c6fb;
            }
          }
        }
      }

      .relat-graph-group {
        height: 33.3333%;
        padding: 7px 0;

        .relat-graph-body {
          height: 100%;
          width: 100%;
          background-image: url(../../assets/img/indexHome/box-image.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center center;
          padding: 8px 30px 35px;
        }
      }
    }
  }
</style>
